<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>css flex教程 - itxst.com</title>
    <meta name="keywords" content="css flex 教程" />
    <meta name="description" content="css flex是W3C组织在2009年提出的一种新布局方案，可以方便的解决原来通过依赖display和浮动方案的缺陷,比如display float实现居中就很麻烦。经过多年的发展css flex目前可以在所有主流浏览器在运行，但是IE浏览器则需要在IE10及以上版本才支持" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/css-flex/tutorial.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/css-flex/tutorial.html">css flex 教程</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="css-flex">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>css flex教程</h1>
               
               <p>
    css flex是W3C组织在2009年提出的一种新布局方案，可以方便的解决原来通过依赖display和浮动方案的缺陷,比如display float实现垂直居中就很麻烦。经过多年的发展css flex目前可以在所有主流浏览器在运行，但是IE浏览器则需要在IE10及以上版本才支持，在移动端的兼容情况，安卓4.4以下版本不支持,IOS 7.1以下版本不支持。
</p>
<h2>
    flex概念
</h2>
<p>
    <img style="width: 100%;border:1px solid #ddd;border-radius:3px" src="https://img1.itxst.com/b/c/bc52b2d775ef8ba62298527e47617ddb.png"/>
</p>
<p>
    Flex 是 Flexible Box 的缩写，用来为html盒状模型提供极大的方便性，元素设为 Flex 布局以后，它的所有子元素自动成为容器成员，而子元素的float、clear和vertical-align属性将失效。我们通过以下例子来看css flex的一个最基本布局。
</p>
<p class="itxstdemo itxstdemom" data-id="ffvzrjnj" data-lang="js" data-h="150">
    例子
</p>
<h2>
    FLEX主轴与交叉轴
</h2>
<p>
    <img style="width: 100%;border:1px solid #ddd;border-radius:3px" src="https://img1.itxst.com/f/3/f32990bff490aeddcbc6521b27bc218e.png"/>
</p>
<h2>
    FLEX属性,父元素属性
</h2>
<div class="xst-table">
    <table interlaced="enabled">
        <tbody>
            <tr class="ue-table-interlace-color-single firstRow">
                <th style="border-color: rgb(221, 221, 221); word-break: break-all;width:100px;">
                    属性名称
                </th>
                <th style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    说明
                </th>
                <th style="word-break: break-all; border-color: rgb(221, 221, 221);">
                    可选值
                </th>
            </tr>
            <tr class="ue-table-interlace-color-double">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="ybnezub7.html" target="_self">flex-direction</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素在主轴的排列方向
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    row | row-reverse | column | column-reverse<br/>
                </td>
            </tr>
            <tr class="ue-table-interlace-color-single">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="a6vevqbq.html" target="_self">flex-wrap</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素的换行方式
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    nowrap | wrap | wrap-reverse<br/>
                </td>
            </tr>
            <tr class="ue-table-interlace-color-double">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="qb6ra3nz.html" target="_self">flex-flow</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    flex-direction属性和flex-wrap属性的简写形式
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    默认值为row nowrap
                </td>
            </tr>
            <tr class="ue-table-interlace-color-single">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="yenrqfyi.html" target="_self">justify-content</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素在主轴上的对齐方式，当flex-direction为row可以理解成水平对齐方式
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    flex-start | flex-end | center | space-between | space-around<br/>
                </td>
            </tr>
            <tr class="ue-table-interlace-color-double">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="fnunrfqm.html" target="_self">align-items</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素在交叉轴上对齐方式，当flex-direction为row可以理解成垂直对齐方式
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    flex-start | flex-end | center | baseline | stretch<br/>
                </td>
            </tr>
            <tr class="ue-table-interlace-color-single">
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="aenj3ia7.html" target="_self">align-content</a>
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
                </td>
                <td valign="top" colspan="1" rowspan="1" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    flex-start | flex-end | center | space-between | space-around | stretch<br/>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<h2>
    项目的属性, 子元素属性
</h2>
<div class="xst-table">
    <table interlaced="enabled" width="-42">
        <tbody>
            <tr class="ue-table-interlace-color-single firstRow">
                <th style="border-color: rgb(221, 221, 221); word-break: break-all;width:100px">
                    属性名称
                </th>
                <th style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    说明
                </th>
            </tr>
            <tr class="ue-table-interlace-color-double">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="uz7vjynf.html" target="_self">order</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素的排列顺序。数值越小越靠前，默认为0
                </td>
            </tr>
            <tr class="ue-table-interlace-color-single">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="uvrmauim.html" target="_self">flex-grow</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素的放大比例，即存在剩余空间充足子元素如何放大，默认为0空间充足也不放大
                </td>
            </tr>
            <tr class="ue-table-interlace-color-double">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="iybf6vvf.html" target="_self">flex-shrink</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素的缩小比例，即如果空间不足时子元素如何缩小，默认为1空间不足时都将等比例缩小
                </td>
            </tr>
            <tr class="ue-table-interlace-color-single">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="yeqnyrjb.html" target="_self">flex-basis</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    子元素占的空间，跟width或height属性一样的值（比如50px），默认值为auto
                </td>
            </tr>
            <tr class="ue-table-interlace-color-double">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="byvfejze.html" target="_self">flex</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
                </td>
            </tr>
            <tr class="ue-table-interlace-color-single">
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    <a href="qnzyeyya.html" target="_self">align-self</a>
                </td>
                <td valign="top" style="border-color: rgb(221, 221, 221); word-break: break-all;">
                    允许单个子元素有与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
                </td>
            </tr>
        </tbody>
    </table>
</div>
 
               
                </div>
                <div class="content-r">   <a href="/css-flex/tutorial.html" target="_self">
                     <img src="//img1.itxst.com/f/b/fb1ce99caee889d04b27855081b72e7b.png" alt="css flex 教程" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
            <a data-level="1" class="leve-1   doc-1    doc-2 " href="/css-flex/tutorial.html" title="css flex教程">css flex 教程</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">父元素属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/ybnezub7.html" title="css flex flex-direction属性，子元素在主轴的排列方向">flex-direction 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/a6vevqbq.html" title="css flex flex-wrap属性，子元素换行方式">flex-wrap 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/qb6ra3nz.html" title="css flex flex-flow属性为flex-direction属性和flex-wrap属性的简写形式">flex-flow 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/yenrqfyi.html" title="css flex justify-content属性，子元素在主轴上的对齐方式。">justify-content 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/fnunrfqm.html" title="css flex align-items属性 交叉轴上对齐方式垂直对齐方式">align-items 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/aenj3ia7.html" title="css flex align-content属性在多根交叉轴上对齐方式垂直对齐方式">align-content 属性</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">子元素属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/uz7vjynf.html" title="css flex order属性子元素的排列顺序">order 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/uvrmauim.html" title="css flex flex-grow属性设置子元素放大比例">flex-grow 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/iybf6vvf.html" title="css flex flex-shrink属性设置子元素放小比例">flex-shrink 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/yeqnyrjb.html" title="css flex flex-basis属性">flex-basis 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/byvfejze.html" title="css flex 子元素flex属性">flex 属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/qnzyeyya.html" title="css flex align-self属性">align-self 属性</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">常见用例</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/2qj6jb2i.html" title="css flex 左边固定右边自适应">左边固定右边自适应</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/ebm2ueyj.html" title="css flex 右边固定左边自适应">右边固定左边自适应</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/26ramuvz.html" title="css flex 两边固定中间自适应">两边固定中间自适应</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/bffuz3ey.html" title="css flex 上下固定中间自适应">上下固定中间自适应</a>
            <a data-level="2" class="leve-2   doc-1   " href="/css-flex/mafz22y7.html" title="css flex 1 省略号">css flex 1 省略号</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
